<template>
    <div class="honor-main h-full overflow-auto">
        <template v-for="(item, index) in list.items" :key="item.id">
            <div class="honor-main-list" v-if="item.job" @click="studentcertclick(item.id)">
                <div class="honor-main-list-bg"></div>
                <div>{{ item.job.name }}</div>
            </div>
        </template>
    </div>
    <el-dialog title="查看证书" v-model="dialogVisible" width="640" :before-close="handleClose" top="5vh">
        <div class="box-main flex-center">
            <div class="box-bg relative">
                <img class="w-20 h-20 absolute right-[80px] top-[116px]" v-if="qrCodeUrl" :src="qrCodeUrl" alt="" style="border: 1px solid #006AA8;border-radius: 4px">
                <div class="px-[80px]">
                    <div class="text-[40px] text-[#E45754] text-center leading-[48px] tracking-[20px] mb-3">能力证书</div>
                    <div class="text-custom-text title-en flex items-center justify-center mb-[22px]">
                        <img src="@/assets/images/Vector2.png" alt="">
                        <span> Certificate of Competency </span>
                        <img src="@/assets/images/Vector.png" alt="">
                    </div>
                    <div class="text-[32px] text-custom-text font-semibold text-center leading-[32px] mb-[32px]">{{
                        datas.job }}
                    </div>
                    <div class="text-base font-semibold flex items-center mb-[16px]">
                        <div class="w-[130px] text-custom-text-65 leading-[28px] text-justify"
                            style="text-align-last: justify;">姓名</div>
                        <div class="text-custom-text leading-[28px]">：{{ datas.student_name }}</div>
                    </div>
                    <div class="text-base font-semibold flex items-center mb-[16px]">
                        <div class="w-[130px] text-custom-text-65 leading-[28px] text-justify"
                            style="text-align-last: justify;">身份证号</div>
                        <div class="text-custom-text leading-[28px]">：{{ datas.id_card }}</div>
                    </div>
                    <div class="text-base font-semibold flex items-center mb-[16px]">
                        <div class="w-[130px] text-custom-text-65 leading-[28px] text-justify"
                            style="text-align-last: justify;">岗位参考能力值</div>
                        <div class="text-custom-text leading-[28px]">：{{ datas.job_ability_line }}分</div>
                    </div>
                    <div class="text-base font-semibold flex items-center mb-[16px]">
                        <div class="w-[130px] text-custom-text-65 leading-[28px] text-justify"
                            style="text-align-last: justify;">能力值测评情况</div>
                        <div class="text-custom-text">：<span class="text-2xl text-[#E45754]">{{ datas.total_score
                                }}分</span>
                        </div>
                    </div>
                    <div class="text-custom-text-65 leading-[28px] text-base font-semibold flex items-center mb-[8px]">
                        能力值分项测评情况：</div>
                    <div class="grid grid-cols-4 gap-1 mb-[12px]">
                        <div class="text-custom-text font-semibold leading-[22px]" v-for="item in datas.score_details">
                            {{ item.name }}：
                            <div class="font-normal text-custom-text-65">
                                {{ item.score }}/{{ item.line_score }}
                            </div>
                        </div>
                    </div>
                </div>
                <div>

                    <div
                        class="text-right font-medium leading-5 text-xs text-custom-text-65 mb-[60px] pl-[80px] pr-[80px]">
                        *完整测评情况请扫描证书右上角二维码，或登录下方指定网址查询
                    </div>

                    <div class="flex items-center justify-between pl-[80px] pr-[64px]">
                        <div class="font-semibold text-xs">
                            <div>
                                <span class="text-custom-text-65 leading-5">发证日期：</span><span
                                    class="text-custom-text leading-5">{{ datas.cert_date }}</span>
                            </div>
                            <div>
                                <span class="text-custom-text-65 leading-5">查询网址：</span><span
                                    class="text-custom-text leading-5">www.chinatest.com</span>
                            </div>
                        </div>
                        <div class="font-semibold text-xs relative">
                            <div class="text-custom-text leading-5 text-center tracking-[4px]">
                                江苏省建设教育协会
                            </div>
                            <div class="text-custom-text leading-5 text-[10px]">
                                Jiangsu Association of Construction Education
                            </div>
                            <img class="absolute top-[-26px] inset-x-1/3 w-[90px] h-[90px]" src="@/assets/home/yinzhang.png" alt="">
                        </div>
                    </div>
                </div>
                <!-- <div class="box-title-conten">
                <div class="flex"><p>{{ datas.student_name }}</p>身份证号<p>{{ datas.id_card }}</p> 获得 <p>{{ datas.job }}</p> <p>{{ datas.level }}</p>级别证书</div>
                <div class="flex nandy">
                    难度
                    <p class="flex">
                        <img src="../../assets/images/star.png" alt="" v-for="item in datas.hard_level" :key="item">
                    </p>
                    总分 <p>{{ datas.total_score }}</p>
                </div>
                <div class="flex nandy">
                    考核名称 <p>{{ datas.paper_name }}</p>
                </div>
                <div class="nandy mb-4">
                    <div class="custom-text-65">得分情况：</div>
                    <div class="grid grid-cols-3 gap-3">
                        <div class="flex custom-text" v-for="(item, index) in datas.score_details" :key="index">
                            <span>{{ item.name }}：</span>
                            <span>{{ item.score }}</span>
                        </div>
                    </div>
                </div>
                <div class="box-qianming flex">
                    <div class="flex1">{{ datas.cert_date }}</div>
                    <div>{{ datas.issue_org }}</div>
                </div>
            </div> -->
            </div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="downloadCertificate">下 载</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue';
import { userApi } from '@/api/modules/user.js'
import html2canvas from 'html2canvas';
import QRCode from 'qrcode';
// const router = useRouter()
const qrCodeUrl = ref('')
const list = ref([])
const datas = ref([])
const dialogVisible = ref(false)
const props = defineProps({
  previewData: {
    type: Boolean,
    required: false,
    default: null
  },
  isResumePublic: Boolean
});
onMounted(() => {
    fetchData();
});
const generateQRCode = (text) => {
    QRCode.toDataURL(text, { errorCorrectionLevel: 'H' }, (err, url) => {
        if (err) console.error(err)
        qrCodeUrl.value = url
    })
}
const fetchData = async () => {
    try {
        const data = await userApi.getStudentCert({
            page: 1,
            pageSize: 999999
        });

        list.value = data
    } catch (err) {
        console.log('Failed to fetch data:', err);
    }
};
// 下载证书
const downloadCertificate = async () => {
    const container = document.querySelector('.box-main');
    if (!container) return;
    try {
        const canvas = await html2canvas(container, {
            useCORS: true,
            allowTaint: true
        });
        const dataURL = canvas.toDataURL('image/png');
        const link = document.createElement('a');
        link.href = dataURL;
        link.download = `${datas.value.student_name}_证书.png`; // 设置下载文件名
        link.click();
        link.remove();
    } catch (error) {
        console.error('下载证书失败:', error);
    }
};
const studentcertclick = async (id) => {
    try {
        const data = await userApi.getStudentCertDetail(id);
        generateQRCode(data.oid)
        const list = data.score_details.filter((item, index) => index <= 9);
        data.score_details = list;
        datas.value = data
        dialogVisible.value = true
    } catch (err) {
        console.log('Failed to fetch data:', err);
    }
}
function handleClose(done) {
    done()
}
const backgroundImages = {
    S: new URL('@/assets/home/jin.png', import.meta.url).href,
    A: new URL('@/assets/home/yin.png', import.meta.url).href,
    B: new URL('@/assets/home/tong.png', import.meta.url).href
}
const textColor = {
    S: '#A57C00',
    A: '#87888A',
    B: '#B56706',
}
const getBackgroundImage = (level) => {
    return backgroundImages[level];
};
const getTextColor = (level) => {
    return textColor[level];
};
</script>
<style lang="scss" scoped>
.box-main {
    padding: 32px 4px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    font-family: Source Han Serif CN, Source Han Serif CN;

    .box-bg {
        width: 600px;
        height: 820px;
        background-image: url(../../assets/home/zhengshu.png);
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 136px 0;
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        .title-en {
            font-family: MiSans, MiSans;
            font-weight: 400;
            font-size: 14px;
            letter-spacing: 1px;
            span{
                margin-left: 5px;
                margin-right: 5px;
            }
        }

        .box-title-conten {
            padding: 136px 80px;
            font-family: MiSans, MiSans;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);

            .box-qianming {
                font-family: MiSans, MiSans;
                font-weight: 400;
                font-size: 14px;
                color: #BE9865;
                padding-left: 30px;
                padding-right: 25px;
                letter-spacing: 1px;
            }

            .nandy {
                margin-top: 20px;
                padding-left: 10px;
            }

            p {
                font-family: MiSans, MiSans;
                font-weight: bold;
                font-size: 22px;
                color: rgba(0, 0, 0, 0.88);
                padding-bottom: 3px;
                margin: 0 10px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.88);

                img {
                    width: 20px;
                    height: 20px;
                    margin-right: 7px;
                }
            }
        }
    }
}

.main-item {
    font-family: MiSans, MiSans;
    font-weight: 400;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.65);
    line-height: 24px;
    font-family: MiSans, MiSans;
    font-weight: 500;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.88);
    line-height: 24px;

    .main-item-content {
        margin-top: 24px;
        height: 756px;
        background: #FFFFFF;
        border-radius: 6px 6px 6px 6px;
        box-sizing: border-box;
        padding: 24px;

        .honor-main {
            font-family: MiSans, MiSans;
            font-weight: 400;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.88);
            // justify-content:space-between;
            line-height: 22px;
            margin-top: 16px;

            .honor-main-list {
                margin-bottom: 16px;
                text-align: center;
                line-height: 38px;
                margin-right: 24px;
                height: 150px;
                display: inline-block;
                cursor: pointer;
            }

            .honor-main-list-bg {
                width: 158px;
                text-align: left !important;
                height: 120px;
                background-image: url(../../assets/home/jin.png);
                background-size: 100% 100%;
                box-sizing: border-box;
                padding: 24px 16px;
                line-height: 30px !important;
                color: #A57C00;
                font-size: 16px;
                font-family: DingTalk JinBuTi, DingTalk JinBuTi;
                font-weight: 400;

                .num {
                    font-weight: bold;
                    font-size: 22px;
                }
            }
        }

        .input-box {
            margin: 20px 0;

            :deep(.el-date-editor) {
                width: 240px;
            }

            :deep(.el-select) {
                width: 240px;
                margin-right: 20px;
            }
        }

        .gun-item {
            margin-bottom: 16px;
            font-family: MiSans, MiSans;
            font-weight: 500;
            font-size: 20px;
            color: rgba(0, 0, 0, 0.88);
            line-height: 28px;

            .gun {
                width: 4px;
                height: 20px;
                background: linear-gradient(180deg, #9DD1FF 0%, #33A0FF 100%);
                border-radius: 1px 1px 1px 1px;
                margin-right: 12px;
            }
        }
    }
}
</style>